<template>
  <div>
    {{name}}-{{age}}
    <button @click="changeName">changeName</button>
    <button @click="changeAge">changeAge</button>
  </div>
</template>

<script>
// watchEffect 监听所有在回调函数中用到的响应属性
import { ref, watchEffect } from 'vue'
export default {
  setup() {
    const name = ref('张三')
    const age = ref(18)
   const stop = watchEffect((data) => {
      // 根据name和 age 两个变量发送网络请求，清除重复请求的副作用
      console.log(name.value, age.value)
      let timer = setTimeout(() => {
        console.log('发送请求')
      }, 2000)
      data(() => {
        clearTimeout(timer)
        // 在这个函数中清除副作用
        // request.cancle()
     
      })
    })
    const changeName = () => name.value = '王五'
    const changeAge = () => {
      age.value++
      if (age.value > 25) {
        stop()
      } 
    }
    return {
      changeName,
      changeAge,
      name,
      age
    }
  }
}
</script>

<style>

</style>